<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>搜索框输入文字自动提示</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 150px;
        }
        
        .list-group {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
            <ul class="list-group" id="list-box">

            </ul>
        </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="tpl">
        {{each result}}
        <li class="list-group-item">{{$value}}</li>
        {{/each}}
    </script>
    <script>
        var search = document.getElementById('search');
        var listBox = document.getElementById('list-box');
        var time = null;
        search.oninput = function() {
            clearTimeout(time)
            var key = this.value;
            if (key.trim().length == 0) {
                listBox.style.display = 'none';
                return;
            }
            time = setTimeout(function() {
                ajax({
                    url: 'http://localhost:3000/searchAutoPrompt',
                    data: {
                        key: key
                    },
                    success: function(result) {

                        var html = template('tpl', {
                            result: result
                        })
                        listBox.innerHTML = html;
                        listBox.style.display = 'block'
                    }
                })
            }, 800)

        }
    </script>
</body>

</html>